<div class="main">
  <div class="condition">
    <form nz-form [formGroup]="dateForm" (ngSubmit)="submitDateForm()">
      <nz-form-item>
        <nz-form-label [nzSpan]="4">类型</nz-form-label>
        <nz-form-control [nzSpan]="20">
          <nz-radio-group formControlName="type" (ngModelChange)="handleTypeChange($event)">
            <label nz-radio-button [nzValue]="'C'">普通</label>
            <label nz-radio-button [nzValue]="'MIN'">分钟粒度</label>
            <label nz-radio-button [nzValue]="'H'">小时粒度</label>
            <label nz-radio-button [nzValue]="'D'">天粒度</label>
            <label nz-radio-button [nzValue]="'W'">周粒度</label>
            <label nz-radio-button [nzValue]="'MON'">月粒度</label>
            <label nz-radio-button [nzValue]="'Q'">季粒度</label>
            <label nz-radio-button [nzValue]="'Y'">年粒度</label>
            <label nz-radio-button [nzValue]="'R'">区间粒度</label>
          </nz-radio-group>
        </nz-form-control>
      </nz-form-item>
      <nz-form-item [class.hide]="!isGranularity">
        <nz-form-label [nzSpan]="4">粒度数</nz-form-label>
        <nz-form-control [nzSpan]="6">
          <nz-input-group nzCompact>
            <nz-select class="select-width" formControlName="granularity">
              <nz-option *ngFor="let granularity of granularityList"
                nzValue="{{granularity}}"
                nzLabel="{{granularity}}"
              >
              </nz-option>
            </nz-select>
            <nz-select formControlName="granularityType" [class.hide]="!isGranularityType" style="width: 35%;">
              <nz-option [nzLabel]="'分钟'" [nzValue]="'MIN'"></nz-option>
              <nz-option [nzLabel]="'小时'" [nzValue]="'H'"></nz-option>
            </nz-select>
          </nz-input-group>
        </nz-form-control>
      </nz-form-item>
      <nz-form-item [class.hide]="!isDelay">
        <nz-form-label [nzSpan]="4">倒推</nz-form-label>
        <nz-form-control [nzSpan]="6">
          <nz-input-group nzCompact="{{isDelayType}}" nzAddOnAfter="{{this.granularityContrast[this.dateForm.value.type]?.name}}">
            <input type="text" nz-input formControlName="delay" [class.input-width]="isDelayType"/>
            <nz-select formControlName="delayType" [class.hide]="!isDelayType" style="width: 35%;">
              <nz-option [nzLabel]="'分钟'" [nzValue]="'MIN'"></nz-option>
              <nz-option [nzLabel]="'小时'" [nzValue]="'H'"></nz-option>
              <nz-option [nzLabel]="'天'" [nzValue]="'D'"></nz-option>
              <nz-option [nzLabel]="'月'" [nzValue]="'MON'"></nz-option>
              <nz-option [nzLabel]="'年'" [nzValue]="'Y'"></nz-option>
            </nz-select>
          </nz-input-group>
        </nz-form-control>
      </nz-form-item>
      <nz-form-item>
        <nz-form-label [nzSpan]="4">初始化日期</nz-form-label>
        <nz-form-control [nzSpan]="8">
          <input type="text" nz-input formControlName="initDate" placeholder="例如：2020-12-25 20:25:30" />
        </nz-form-control>
      </nz-form-item>
      <nz-form-item [class.hide]="!isPlaceHolder">
        <nz-form-label [nzSpan]="4">输入框提示语</nz-form-label>
        <nz-form-control [nzSpan]="8">
          <input type="text" nz-input formControlName="placeHolder" placeholder="例如：请选择日期/时间/月份/年份" />
        </nz-form-control>
      </nz-form-item>
      <nz-form-item>
        <nz-form-label [nzSpan]="4">显示时间格式化</nz-form-label>
        <nz-form-control [nzSpan]="8">
          <input type="text" nz-input formControlName="dateFormat" placeholder="例如：yyyy-MM-dd HH:mm:ss" />
        </nz-form-control>
      </nz-form-item>
      <nz-form-item>
        <nz-form-label [nzSpan]="4">返回时间格式化</nz-form-label>
        <nz-form-control [nzSpan]="8">
          <input type="text" nz-input formControlName="rtDateFormat" placeholder="例如：yyyy-MM-dd HH:mm:ss" />
        </nz-form-control>
      </nz-form-item>
      <nz-form-item>
        <nz-form-label [nzSpan]="4">初始化控件</nz-form-label>
        <nz-form-control [nzSpan]="6">
          <nz-radio-group formControlName="isInit">
            <label nz-radio-button [nzValue]="true">是</label>
            <label nz-radio-button [nzValue]="false">否</label>
          </nz-radio-group>
        </nz-form-control>
      </nz-form-item>
      <nz-form-item [class.hide]="!isShowTime">
        <nz-form-label [nzSpan]="4">是否显示时间选择</nz-form-label>
        <nz-form-control [nzSpan]="6">
          <nz-radio-group formControlName="showTime">
            <label nz-radio-button [nzValue]="true">是</label>
            <label nz-radio-button [nzValue]="false">否</label>
          </nz-radio-group>
        </nz-form-control>
      </nz-form-item>
      <nz-form-item [class.hide]="!isDisabled">
        <nz-form-label [nzSpan]="4">禁选此刻以后时间</nz-form-label>
        <nz-form-control [nzSpan]="6">
          <nz-radio-group formControlName="isDisabled">
            <label nz-radio-button [nzValue]="true">是</label>
            <label nz-radio-button [nzValue]="false">否</label>
          </nz-radio-group>
        </nz-form-control>
      </nz-form-item>
      <nz-form-item [class.hide]="!isRelative">
        <nz-form-label [nzSpan]="4">关联组件</nz-form-label>
        <nz-form-control [nzSpan]="6">
          <nz-radio-group formControlName="relative">
            <label nz-radio-button [nzValue]="true">是</label>
            <label nz-radio-button [nzValue]="false">否</label>
          </nz-radio-group>
        </nz-form-control>
      </nz-form-item>
      <nz-form-item>
        <nz-form-label [nzSpan]="4">额外返回参数</nz-form-label>
        <nz-form-control [nzSpan]="8">
          <nz-select
            [nzMaxTagCount]="3"
            [nzMaxTagPlaceholder]="tagPlaceHolder"
            nzMode="multiple"
            nzPlaceHolder="请选择返回参数"
            formControlName="returnParam"
          >
            <nz-option *ngFor="let param of paramList" [nzLabel]="param.name" [nzValue]="param.value"></nz-option>
          </nz-select>
          <ng-template #tagPlaceHolder let-selectedList> 已选中 {{ selectedList.length + 3 }} 个参数 </ng-template>
          <div class="tips">注意：此选项只是额外添加返回的参数，默认会返回一个时间参数date，可在控制台查看</div>
        </nz-form-control>
      </nz-form-item>
      <nz-form-item>
        <nz-form-control [nzOffset]="7" [nzSpan]="12">
          <button nz-button nzType="primary" [disabled]="!dateForm.valid">生成</button>
        </nz-form-control>
      </nz-form-item>
    </form>
  </div>
  <div class="result">
    <h2>时间控件</h2>
    <div class="attr-list">
      <nz-list [nzDataSource]="attributeList" nzBordered [nzHeader]="'属性说明'" [nzRenderItem]="defaultItem">
        <ng-template #defaultItem let-item>
          <nz-list-item>
            {{ item }}
          </nz-list-item>
        </ng-template>
      </nz-list>
    </div>
    <div class="tips">注意：并不是所有的时间控件都支持以上所有属性，具体每个时间控件可使用哪些属性，请看左侧表单</div>
  </div>

  <div class="date-wrap">
    <h3>时间控件结果</h3>
    <div class="date-picker" *ngIf="!dateParam.relative">
      <app-select-time
        [type]="dateParam.type"
        [granularity]="dateParam.granularity"
        [granularityType]="dateParam.granularityType"
        [delay]="dateParam.delay"
        [delayType]="dateParam.delayType"
        [isDisabled]="dateParam.isDisabled"
        [isInit]="dateParam.isInit"
        [initDate]="dateParam.initDate"
        [placeHolder]="dateParam.placeHolder"
        [dateFormat]="dateParam.dateFormat"
        [showTime]="dateParam.showTime"
        [returnParam]="dateParam.returnParam"
        [rtDateFormat]="dateParam.rtDateFormat"
        (selectDate)="handleSelectDate($event)"
      >
      </app-select-time>
      <div class="time">当前时间控件的值为： {{curDate}}</div>
    </div>
    <div class="double-picker" *ngIf="dateParam.relative">
      <app-select-time
        [type]="dateParam.type"
        [granularity]="dateParam.granularity"
        [delay]="dateParam.delay"
        [isDisabled]="dateParam.isDisabled"
        [isInit]="dateParam.isInit"
        [initDate]="dateParam.initDate"
        [placeHolder]="'开始日期'"
        [dateFormat]="dateParam.dateFormat"
        [showTime]="dateParam.showTime"
        [returnParam]="dateParam.returnParam"
        [relative]="dateParam.relative"
        [endDate]="endDate"
        (selectDate)="handleStartDate($event)"
      >
      </app-select-time>
      <app-select-time
        [type]="dateParam.type"
        [granularity]="dateParam.granularity"
        [delay]="dateParam.delay"
        [isDisabled]="dateParam.isDisabled"
        [isInit]="dateParam.isInit"
        [placeHolder]="'结束日期'"
        [dateFormat]="dateParam.dateFormat"
        [showTime]="dateParam.showTime"
        [returnParam]="dateParam.returnParam"
        [relative]="dateParam.relative"
        [startDate]="startDate"
        (selectDate)="handleEndDate($event)"
      >
      </app-select-time>
    </div>
  </div>
</div>
